// App.tsx
import React, { useState, useEffect } from 'react'
import { Ct } from '@ct'
import { Input } from 'antd'
const { Search } = Input
import './index.scss'

const FrameHub = (props: any) => {
  const [selectIndex, setIndex] = useState(1)
  useEffect(() => {
    props.actions.getList()
  }, [])
  let baseUrl = ''
  if (process.env.ENV_INFO.NODE_ENV === 'prod') {
    baseUrl = `${
      window.origin || window.location.origin
    }/entity/workspace?node_covid_person=`
  } else {
    baseUrl = `${process.env.ENV_INFO.BASEURL}/entity/workspace?node_covid_person=`
  }
  console.log(baseUrl)
  const [url, setUrl] = useState(`${baseUrl}ry1`)
  const data = [
    {
      id: 1,
      code: 'ry1',
      name: '马某',
      gkdw: '徐汇疾控中心',
      date: '2020-05-20 19:07:42',
      source_date: '2020/6/20 17:22:52',
    },
    {
      id: 2,
      code: 'ry2',
      name: '丁某',
      gkdw: '宝山疾控中心',
      date: '2020-05-18 14:21:11',
      source_date: '2020/6/20 17:23:18',
    },
    {
      id: 1000,
      code: 'ry1000',
      name: '王某某',
      gkdw: '静安疾控中心',
      date: '2020-05-15 11:42:43',
      source_date: '2020/6/20 17:23:42',
    },
    {
      id: 4,
      code: 'ry4',
      name: '赵某某',
      gkdw: '金山疾控中心',
      date: '2020-05-13 20:17:20',
      source_date: '2020/6/20 17:24:29',
    },
    {
      id: 5,
      code: 'ry5',
      name: '周某某',
      gkdw: '奉贤疾控中心',
      date: '2020-05-13 12:20:11',
      source_date: '2020/6/20 17:24:54',
    },
    {
      id: 6,
      code: 'ry6',
      name: '孙某某',
      gkdw: '松江疾控中心',
      date: '2020-05-11 13:21:47',
      source_date: '2020/6/20 17:25:33',
    },
    {
      id: 7,
      code: 'ry7',
      name: '李某某',
      gkdw: '崇明疾控中心',
      date: '2020-05-10 21:53:21',
      source_date: '2020/6/20 17:25:56',
    },
    {
      id: 9,
      code: 'ry9',
      name: '居某',
      gkdw: '宝山区疾病预防控制中心',
      date: '2020-01-30 0:00:00',
      source_date: '2020/6/23 12:34:38',
    },
    {
      id: 1003,
      code: 'ry1003',
      name: '石某',
      gkdw: '徐汇疾控中心',
      date: '2020-05-13 20:17:20',
      source_date: '2020/6/20 17:24:29',
    },
    {
      id: 136,
      code: 'ry136',
      name: '陈某',
      gkdw: '宝山疾控中心',
      date: '2020-05-13 12:20:11',
      source_date: '2020/6/20 17:24:54',
    },
    {
      id: 1007,
      code: 'ry1007',
      name: '肖某某',
      gkdw: '静安疾控中心',
      date: '2020-05-11 13:21:47',
      source_date: '2020/6/20 17:25:33',
    },
    {
      id: 1004,
      code: 'ry1004',
      name: '陈某某',
      gkdw: '金山疾控中心',
      date: '2020-05-10 21:53:21',
      source_date: '2020/6/20 17:25:56',
    },
    {
      id: 1006,
      code: 'ry1006',
      name: '居某',
      gkdw: '奉贤疾控中心',
      date: '2020-01-30 0:00:00',
      source_date: '2020/6/23 12:34:38',
    },
    {
      id: 1005,
      code: 'ry1005',
      name: '刘某',
      gkdw: '松江疾控中心',
      date: '2020-01-30 0:00:00',
      source_date: '2020/6/23 12:34:38',
    },
  ]
  return (
    <div className="app-frame">
      <div>
        <h2></h2>
        <div>
          <Search
            placeholder="搜索人员姓名"
            onSearch={(value) => console.log(value)}
            enterButton
          />
        </div>
        <div className="list">
          <ul>
            {data.map((item, index) => {
              return (
                <li
                  key={index}
                  className={index + 1 === selectIndex ? 'active' : ''}
                  onClick={() => {
                    setUrl(`${baseUrl}${item.code}`)
                    setIndex(index + 1)
                  }}
                >
                  <h2>
                    <span>{index < 9 ? `0${index + 1}` : index + 1}</span>
                    {item.name}
                  </h2>
                  <div>
                    <p>
                      <span>管控单位：</span> {item.gkdw}
                    </p>
                    <p>
                      <span>确诊时间：</span> {item.date}
                    </p>
                  </div>
                </li>
              )
            })}
          </ul>
        </div>
      </div>
      {url && <iframe src={url}></iframe>}
    </div>
  )
}

export default Ct({
  model: 'FrameHub',
  Component: FrameHub,
  title: '知识图谱',
})
